
<script>
	// 数据详情页
	import {
		defineComponent
	} from 'vue'
	export default defineComponent({
		name: 'WeworkQrList'
	})
</script>
<script setup>
import {dateTypes} from '@/utils'
import{memberDataDesc} from './../lib/constant'
import {qrListData,qrDataForm,qrDataListData} from '@/data'
	import MyIcon from '@/components/my-icon/index.vue'
	import { ref } from 'vue'
	import {postDataStaff} from '@/api'
		const queryForm = ref({
		date_type:'',
		type:''
	})
	const date_typeList = ref([])
	const selfTime = ref([])
	date_typeList.value = dateTypes
const clear = ()=>{
	queryForm.value = {
		date_type:'day',
	}
	selfTime.value = []
	getData()
}
	const qrList = ref([])
	qrList.value = qrListData
	// 集合数据
	const qrDataSet = ref([])
		const getData=async()=>{
if (selfTime.value){
		if (selfTime.value.length==2){
			queryForm.value.ktime = selfTime.value[0]
			queryForm.value.dtime = selfTime.value[1]
		}else{
			queryForm.value.ktime =''
			queryForm.value.dtime = ''
		}
	}else{
		queryForm.value.ktime =''
		queryForm.value.dtime = ''
	}
		const r = await postDataStaff(queryForm.value)
		if (r) {
			localStorage.setItem('widStaff',r.data.wid)
			qrDataSet.value = r.data
		}
	}
	getData()
	// 集合列表
	const qrDataSetList = ref([])
	qrDataSetList.value = qrDataListData

	const multipleTableRef = ref()
	const multipleSelection = ref([])
	const selectAll = ref(false)
	const total = ref(0)

	const exportExcel = () => {
		console.log('导出excel')
	}
	const handleCurrentChange = (val) => {
		console.log(`current page: ${val}分页请求接口`)
		getqrList()
	}
	const handleSelectAll = () => {
		multipleTableRef.value.clearSelection()
		if (selectAll.value) {
			qrDataSetList.value.forEach((row) => {
				multipleTableRef.value.toggleRowSelection(row, undefined)
			})
		}
	}

	const handleSelectionChange = (val) => {
		multipleSelection.value = val
		if (multipleSelection.value.length == qrDataSetList.value.length) {
			selectAll.value = true
		} else {
			selectAll.value = false
		}
	}


  
</script>

<template>
	<div class="app-edit app-gap-block-top">
    <div class="app-container">
     	<div class="table-title">联系客户数据
			 <span class="a-ml16 app-words-tip-weak">统计说明	<el-popover width="" popper-style="padding: 0px;min-width:0px" placement="bottom" trigger="hover">
									<div class="app-container margin-fa">
									<div class="margin-son" v-for="(item,index) in memberDataDesc" :key="index">{{item}}</div>
									</div>
									<template #reference>
										<MyIcon class="question-icon weak" name="Question" />
									</template>
								</el-popover></span>
			 </div>
			 <div class="app-gap-block-top app-flex-2">
			 <div class="app-flex-left">
					<el-select @change="getData" v-model="queryForm.date_type" class="m-2" placeholder="请选择" size="large">
						<el-option v-for="(item, index) in date_typeList" :key="index" :label="item.title" :value="item.name" />
					</el-select>
					<span class="app-gap-words-left app-select-right">自定义：</span>
					<el-date-picker value-format="YYYY-MM-DD"
							format="YYYY-MM-DD" @change="getData" class="app-date-picker" v-model="selfTime" type="daterange" range-separator="~"
						start-placeholder="开始日期" end-placeholder="结束日期" size="large" />
				</div>
				<div>
				<el-button class="app-btn" @click="clear">重置</el-button>
				</div>

				</div>
			<div class="app-gap-block-top">
				<el-tag class="app-blue-card" style="width: 1070px;">
					<div class="app-flex-left">
						<div class="app-card-item app-border-right">
						<div class="app-card-title">{{qrDataSet.chat_cnt}}</div>
						<div class="app-card-desc">聊天总数(条)</div>
					</div>
					<div class="app-card-item app-border-right">
						<div class="app-card-title">{{qrDataSet.message_cnt}}</div>
						<div class="app-card-desc">发送消息数(条)</div>
					</div>
					<div class="app-card-item app-border-right">
						<div class="app-card-title">{{qrDataSet.new_apply_cnt}}</div>
						<div class="app-card-desc">发起申请数(条)</div>
					</div>
					<div class="app-card-item app-border-right">
						<div class="app-card-title">{{qrDataSet.new_contact_cnt}}</div>
						<div class="app-card-desc">新增客户数(人)</div>
					</div>
					<div class="app-card-item">
						<div class="app-card-item">
						<div class="app-card-title">{{qrDataSet.negative_feedback_cnt}}</div>
						<div class="app-card-desc">删除/拉黑成员的客户数</div>
					</div>
					</div>



					<!-- <div class="app-card-item app-border-right">
						<div class="app-card-title">{{qrDataSet.todayNew}}%</div>
						<div class="app-card-desc">已回复聊天占比</div>
					</div> -->
				

					<!-- <div class="app-card-item">
						<div class="app-card-item">
						<div class="app-card-title">{{qrDataSet.todayLossing}}</div>
						<div class="app-card-desc">平均首次回复时长(分)</div>
					</div>
					</div> -->
					</div>
				</el-tag>
				

			</div>

    </div>
    
	<div>
</div>

</div>


</template>
<style lang="scss">
	@import url('../../../../style/app-component.scss');
	@import '../../../../style/mixin.scss';
</style>
<style lang="scss" scope>
	.app-card-item{
		width:220px !important;
	}
</style>